@import url(./common.less);

.movies-container {
  position: absolute;
  top: 70px;
  bottom: 0px;
  overflow: auto;

  .nav-bar {
    line-height: 20px;
    border-bottom: 1px solid @font-default-color;
  }

  .movie-item-wrap {
    display: inline-block;
    margin: 30px 40px;

    .cover {
      position: relative;
      width: 140px;
      height: 200px;
      border-radius: 5px;
      color: @white;
      background: url("../../upload/movies/cover_2.jpg") center no-repeat;
      background-size: cover;
      cursor: pointer;

      .brand {
        position: absolute;
        top: -15px;
        right: -35px;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        font-size: 36px;
        font-family: @brand-font;
        text-align: center;
        line-height: 70px;
        background: @yellow;
      }

      .widget {
        height: 100%;
        border-radius: 5px;
        background-color: @mask-color;
        box-shadow: 0 0 30px @blue;
        opacity: 0;
        .transition-fast();

        .play-btn {
          width: 40px;
          height: 40px;
          .hr-vt-center(40px, 40px);
          font-size: 20px;
          background: @white;
          color: @red;
          box-shadow: 0 0 5px @dark;
          border-radius: 50%;
          span {
            top: 0px;
            left: 1px;
            line-height: 40px;
          }
        }
      }

      &:hover .widget {
        opacity: 1;
      }
    }

    .title {
      font-size: @large-font;
      color: @white;
    }
    .desc-text {
      font-size: @small-font;
      a {
        .can-click();
        text-decoration: underline;
        color: @font-light-color;
      }
    }
  }
}
